本日小作品：
https://codepen.io/linchinhsuan/pen/NWNOMYj

練習重點摘要：

opacity: 0;

讓箭頭和冰塊一開始都是透明度為0的狀態，相當於隱藏起來。

$(".down").css("opacity", "1");

箭頭使用了jQuery直接覆蓋css屬性值，又因為箭頭寫了transition: all 1.2s ease;，會變成淡入的效果。

.freeze .ice.show{opacity: 1;}

透過jQuery$(".ice").addClass("show");動態加上show這個class，觸發這行程式碼，覆蓋掉原本的opacity: 0;，並且因為transition: all 1.2s 1.2s ease;會變一個淡入的動畫效果。同時，在transition: all 1.2s 1.2s ease;中第二個1.2s是延遲秒數，所以會先淡入箭頭再淡入冰塊，達到一個由上而下的畫面。

height: 90px;overflow: hidden;

將按鈕的區塊寫死高度，然後將reset按鈕透過絕對定位定位到超過區塊的地方，最後使用overflow: hidden;隱藏起來。

.freeze .change .reset.up{top:50px;opacity: 1;}

透過jQuery$(".reset").addClass("up");動態加上class，觸發這行程式碼，讓他的位置跑到從隱藏的地方跑上來，同時也把透明度從0改成1。兩者加在一起就成功做出一個遮罩淡入的效果。

$(".freeze .down").css({"opacity":"0","transition":"all 1.2s 2.4s ease"});

用jQuery更改一個以上的css屬性的寫法，類似於js物件，都是{}裡面放上屬性:值的鍵值對，然後以逗號分開。前面的是reset讓箭頭淡出，後者則是更改箭頭的動畫底累秒數，讓動畫變成由下而上的淡出。因此，若已經觸發過reset按鈕，下次點擊【型態變化】的時候順序會是：冰塊出現＞箭頭出現。為了避免這樣的情況，在【型態變化】的點擊事件上多寫一行$(".freeze .down").css("transition","all 1.2s ease");。

－－－

備註：
本小作品使用了Pure.css的按鈕
圖片版權來自
Icons made by Freepik from www.flaticon.com

－－－

本日結語：
今天是七天，用了jQuery做了小動畫。一想到鐵人賽過了一週就覺得不可思議，希望最終能夠順利完賽！